import { defineView } from "@/routers/tools.mjs";

/**
 * @type {DefineView}
 */
const hsView = defineView({
  controller: class HSController {
    static $inject = [
      "$scope",
      "$http",
      "$uiRouter",
      "$state",
      "$stateParams",
      "$transitions",
    ];

    constructor(
      /**
       * @type {ng.IScope}
       */
      $scope,
      /**
       * @type {ng.IHttpService}
       */
      $http,
      /**
       * @type {import('@uirouter/core').UIRouter}
       */
      $uiRouter,
      /**
       * @type {import('@uirouter/core').StateService}
       */
      $state,
      /**
       * @type {import('@uirouter/core').StateParams}
       */
      $stateParams,
      /**
       * @type {import('@uirouter/core').TransitionService}
       */
      $transitions,
    ) {
      this.$scope = $scope;
      this.$http = $http;
      this.$uiRouter = $uiRouter;
      this.$state = $state;
      this.$stateParams = $stateParams;
      this.$transitions = $transitions;
      this.$uiRouterGlobals = $uiRouter.globals;
    }

    handleClick() {
      console.log(this.$uiRouterGlobals.$current);
    }
  },
  controllerAs: "hsCtrl",
  template: /* HTML */ html`
    <div class="btstrap container">
      <div class="row">
        <div class="col-sm-1">.col-sm-1</div>
        <div class="col-sm-1">.col-sm-1</div>
        <div class="col-sm-1">.col-sm-1</div>
        <div class="col-sm-1">.col-sm-1</div>
        <div class="col-sm-1">.col-sm-1</div>
        <div class="col-sm-1">.col-sm-1</div>
        <div class="col-sm-1">.col-sm-1</div>
        <div class="col-sm-1">.col-sm-1</div>
        <div class="col-sm-1">.col-sm-1</div>
        <div class="col-sm-1">.col-sm-1</div>
        <div class="col-sm-1">.col-sm-1</div>
        <div class="col-sm-1">.col-sm-1</div>
      </div>
      <div class="row">
        <div class="col-sm-8">.col-sm-8</div>
        <div class="col-sm-4">.col-sm-4</div>
      </div>
      <div class="row">
        <div class="col-sm-4">.col-sm-4</div>
        <div class="col-sm-4">.col-sm-4</div>
        <div class="col-sm-2">.col-sm-2</div>
        <div class="col-sm-2">.col-sm-2</div>
      </div>
      <div class="row">
        <div class="col-sm-6">.col-sm-6</div>
        <div class="col-sm-6">.col-sm-6</div>
      </div>
      <hr />
      <div class="row">
        <div class="col-xs-9">.col-xs-9</div>
        <div class="col-xs-4">
          .col-xs-4<br />Since 9 + 4 = 13 &gt; 12, this 4-column-wide div gets
          wrapped onto a new line as one contiguous unit.
        </div>
        <div class="col-xs-6">
          .col-xs-6<br />Subsequent columns continue along the new line.
        </div>
        <div class="col-xs-12">.col-xs-12</div>
      </div>
      <hr />

      no-gutters 去除内边距
      <div class="row row-no-gutters">
        <div class="col-xs-12 col-sm-8">.col-xs-12 .col-sm-8</div>
        <div class="col-xs-6 col-sm-4">.col-xs-6 .col-sm-4</div>
      </div>
      with-gutters
      <div class="row">
        <div class="col-xs-6 col-sm-4">.col-xs-6 .col-sm-4</div>
        <div class="col-xs-6 col-sm-4">.col-xs-6 .col-sm-4</div>
        <div class="col-xs-6 col-sm-4">.col-xs-6 .col-sm-4</div>
      </div>
      no-gutters
      <div class="row row-no-gutters">
        <div class="col-xs-6">.col-xs-6</div>
        <div class="col-xs-6">.col-xs-6</div>
      </div>
      <hr />
      with-offset
      <div class="row">
        <div class="col-sm-4">.col-sm-4</div>
        <div class="col-sm-4 col-sm-offset-4">.col-sm-4 .col-sm-offset-4</div>
      </div>
      <div class="row">
        <div class="col-sm-2 col-sm-offset-2">.col-sm-2 .col-sm-offset-2</div>
        <div class="col-sm-2 col-sm-offset-2">.col-sm-2 .col-sm-offset-2</div>
      </div>
      <div class="row">
        <div class="col-sm-4 col-sm-offset-2">.col-sm-4 .col-sm-offset-2</div>
        <div class="col-sm-4 col-sm-offset-2">.col-sm-4 .col-sm-offset-2</div>
      </div>

      <hr />
      拥有多个 列控制属性, 可以控制不同 尺寸下列的宽度
      <div class="row">
        <div class="col-xs-6 col-sm-4 col-md-6 col-lg-1">单元格</div>
        <div class="col-xs-6 col-sm-4 col-md-1 col-lg-1">单元格</div>
        <div class="col-xs-6 col-sm-4 col-md-1 col-lg-1">单元格</div>
        <div class="col-xs-6 col-sm-4 col-md-1 col-lg-1">单元格</div>
        <div class="col-xs-6 col-sm-4 col-md-1 col-lg-1">单元格</div>
        <div class="col-xs-6 col-sm-4 col-md-1 col-lg-1">单元格</div>
        <div class="col-xs-6 col-sm-4 col-md-1 col-lg-1">单元格</div>
        <div class="col-xs-6 col-sm-4 col-md-6 col-lg-1">单元格</div>
        <div class="col-xs-6 col-sm-4 col-md-1 col-lg-1">单元格</div>
        <div class="col-xs-6 col-sm-4 col-md-1 col-lg-1">单元格</div>
        <div class="col-xs-6 col-sm-4 col-md-1 col-lg-1">单元格</div>
        <div class="col-xs-6 col-sm-4 col-md-1 col-lg-1">单元格</div>
      </div>
      <!-- 
            要求：
            多余的列（column）将另起一行排列
            1.平板放三行，第一个占3个位置，其他占九个位置
         -->
      <div class="row">
        <div class="col-sm-3">平板</div>
        <div class="col-sm-9">平板</div>
        <div class="col-sm-9">平板</div>
        <div class="col-sm-9">平板</div>
      </div>

      <div class="row">
        <div class="col-md-2">平板</div>
        <div class="col-md-2">
          <!-- 嵌套 -->
          <div class="container-fluid">
            <div class="row">
              <div class="col-sm-3">盒</div>
              <div class="col-sm-3">盒</div>
              <div class="col-sm-3">盒</div>
              <div class="col-sm-3">盒</div>
            </div>
          </div>
        </div>
        <div class="col-md-2">平板</div>
        <div class="col-md-2">平板</div>
        <div class="col-md-2">平板</div>
        <div class="col-md-2">平板</div>
      </div>
      <hr />
      列排序 (.col-md-push-* 和 .col-md-pull-*)
      这里的例子把原尺寸的调换了一下，这样就可以把列的位置调换了。(使用时最好push和pull相连)
      <div class="row">
        <div class="col-md-1 col-md-push-4">1 4</div>
        <div class="col-md-4 col-md-pull-1">4 1</div>
        <div class="col-md-2 col-md-push-3">2 3</div>
        <div class="col-md-3 col-md-pull-2">3 2</div>
      </div>
      <div class="row">
        <div class="col-md-9 col-md-push-3">.col-md-9 .col-md-push-3</div>
        <div class="col-md-3 col-md-pull-9">.col-md-3 .col-md-pull-9</div>
      </div>

      <hr />
      <!-- END-ALL -->
    </div>
  `,
});

export default hsView;
